<template>
  <div class="home">
    <div class="outer">
      <aside :style="{ width: isCollapse ? '64px' : '240px' }">
        <el-menu
          :default-active="activeIndex"
          :collapse="isCollapse"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :collapse-transition="false"
          @select="handleSelect"
        >
          <!-- <el-menu-item index="首页">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item> -->
          <template v-for="(item, index) in src_navs">
            <!-- 第一层：有子级 -->
            <template v-if="item.submenu">
              <el-submenu :index="item.title" :key="index" v-hasPermi="item.hasPermi">
                <template slot="title" >
                  <i :class="item.icon"></i>
                  <span slot="title">{{ item.title }}</span>
                </template>
                <el-menu-item-group>
                  <template v-for="(son, son_index) in item.submenu">
                    <!-- 第二层：有子级 -->
                    <template v-if="son.submenu">
                      <el-submenu :index="son.title" :key="son_index" v-hasPermi="son.hasPermi">
                        <template slot="title">
                          <i :class="son.icon"></i>
                          <span slot="title">{{ son.title }}</span>
                        </template>
                        <el-menu-item-group>
                          <template
                            v-for="(grandson, grandson_index) in son.submenu"
                          >
                            <el-menu-item
                              :index="grandson.title"
                              :key="grandson_index"
                            >
                              <i :class="grandson.icon"></i>
                              <span slot="title">{{ grandson.title }}</span>
                            </el-menu-item>
                          </template>
                        </el-menu-item-group>
                      </el-submenu>
                    </template>
                    <!-- 第二层：无子级 -->
                    <template v-else>
                      <el-menu-item :index="son.title" :key="son_index">
                        <i :class="son.icon"></i>
                        <span slot="title">{{ son.title }}</span>
                      </el-menu-item>
                    </template>
                  </template>
                </el-menu-item-group>
              </el-submenu>
            </template>
            <!-- 第一层：无子级 -->
            <template v-else>
              <el-menu-item :index="item.title" :key="index">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.title }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>

        <div class="close-aside" @click="isCollapse = !isCollapse">
          <i class="el-icon-d-arrow-left" v-show="isCollapse === false"></i>
          <i class="el-icon-d-arrow-right" v-show="isCollapse === true"></i>
        </div>
      </aside>

      <div class="inner">
        <div class="tabs_parent">
         <div class="tabs">
          <!-- <el-tag
            key="首页"
            effect="dark"
            :type="isHomeNow ? 'warning' : 'info'"
            @click="toHome"
            >首页</el-tag
          > -->
          <el-tag
            v-for="tag in tags"
            :key="tag.name"
            effect="dark"
            :closable="tag.name !== '首页'"
            :type="tag.type"
            @click="handleTabClick(tag)"
            @close="handleClose(tag)"
          >
            {{ tag.name }}
          </el-tag>
         </div>
        </div>
        <div class="router-view">
          <transition name="fade-transform" mode="out-in">
            <router-view />
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "",
      isCollapse: false,
      //用户权限 接口返回的源数据
      src_navs: [
        { title: "首页", url: "/system/work", icon: "el-icon-s-home", hasPermi: ["*:*:*"] },
         {    
             title: "业务应用",
             icon: "el-icon-suitcase",
               submenu: [
                { title: "设备列表", url: "/system/mqttlist", icon: "el-icon-mobile-phone", hasPermi: ["*:*:*"] },
                { title: "app列表", url: "/system/applist", icon: "el-icon-coin", hasPermi: ["*:*:*"] },
                { title: "固件管理", url: "/system/firmware", icon: "el-icon-cpu", hasPermi: ["*:*:*"] },
                
              ], 
              hasPermi: ["*:*:*"],  //权限控制字段
            },
        {
          title: "系统管理",
          icon: "el-icon-search",
          submenu: [
            { title: "用户管理", url: "/system/user", icon: "el-icon-folder", hasPermi: ["*:*:*"] },
            { title: "角色管理", url: "/system/role", icon: "el-icon-box", hasPermi: ["*:*:*"] },
            { title: "菜单管理", url: "/system/menu", icon: "el-icon-search", hasPermi: ["*:*:*"] },
            { title: "App菜单管理", url: "/system/menuApp", icon: "el-icon-search", hasPermi: ["*:*:*"] },
            { title: "部门管理", url: "/system/dept", icon: "el-icon-reading", hasPermi: ["*:*:*"] },
            { title: "岗位管理", url: "/system/post", icon: "el-icon-mouse", hasPermi: ["*:*:*"] },
            { title: "字典管理", url: "/system/dict", icon: "el-icon-mouse", hasPermi: ["*:*:*"] },
            { title: "通知公告", url: "/system/notice", icon: "el-icon-bell", hasPermi: ["*:*:*"] },
            {
              title: "日志管理",
              icon: "el-icon-sunny",
              submenu: [
                { title: "操作日志", url: "/system/operlog", icon: "el-icon-aim", hasPermi: ["*:*:*"] },
                { title: "登录日志", url: "/system/logininfor", icon: "el-icon-food", hasPermi: ["*:*:*"] },
              ],
              hasPermi: ["system:operlog:list"]
            },
          ],
          hasPermi: ["system:user:list"],  //权限控制字段
        },
         {
              title: "系统监控",
              icon: "el-icon-sunny",
              submenu: [
                { title: "在线用户", url: "/system/online", icon: "el-icon-food", hasPermi: ["*:*:*"] },
                { title: "定时任务", url: "/system/job", icon: "el-icon-aim", hasPermi: ["*:*:*"] },
                { title: "服务监控", url: "/system/cpu", icon: "el-icon-aim", hasPermi: ["*:*:*"] },
                { title: "缓存监控", url: "/system/cache", icon: "el-icon-aim", hasPermi: ["*:*:*"] },
                
              ],
              hasPermi: ["monitor:online:list"],  //权限控制字段
            },
        {    
             title: "系统工具",
             icon: "el-icon-coin",
               submenu: [
                { title: "代码生成", url: "/system/gen", icon: "el-icon-coin", hasPermi: ["*:*:*"] },
                
              ], 
              hasPermi: ["tool:gen:code"],  //权限控制字段
            },
         {    
             title: "流程管理",
             icon: "el-icon-coin",
               submenu: [
                { title: "流程定义", url: "/system/flowable/definition", icon: "el-icon-coin", hasPermi: ["*:*:*"] },
                { title: "表单配置", url: "/system/flowable/form", icon: "el-icon-aim", hasPermi: ["*:*:*"] },
              ], 
              hasPermi: ["flowable:definition:list"],  //权限控制字段
            },
            {    
             title: "任务管理",
             icon: "el-icon-coin",
               submenu: [
                { title: "我的流程", url: "/system/flowable/task/process", icon: "el-icon-coin", hasPermi: ["*:*:*"] },
                { title: "待办任务", url: "/system/flowable/task/todo", icon: "el-icon-aim", hasPermi: ["*:*:*"] },
                { title: "已办任务", url: "/system/flowable/task/finished", icon: "el-icon-aim", hasPermi: ["*:*:*"] },
              ], 
              hasPermi: ["flowable:task:process"],  //菜单权限控制字段
            },
      ],
      // 用于标签页处理的数据
      navs: [
        { title: "首页", url: "/system/work" },
        { title: "设备列表", url: "/system/mqttlist" },
        { title: "app列表", url: "/system/applist" },
        { title: "固件管理", url: "/system/firmware" },
        { title: "用户管理", url: "/system/user" },
        { title: "分配角色", url: "/system/auth-role/:userId" },
        { title: "角色管理", url: "/system/role" },
        { title: "分配用户", url: "/system/auth-user/:roleId" },
        { title: "菜单管理", url: "/system/menu" },
        { title: "App菜单管理", url: "/system/menuApp" },
        { title: "部门管理", url: "/system/dept" },
        { title: "岗位管理", url: "/system/post" },
        { title: "字典管理", url: "/system/dict" },
        { title: "字典数据", url: "/system/dict-data/:dictId" },
        { title: "通知公告", url: "/system/notice" },
        { title: "操作日志", url: "/system/operlog" },
        { title: "登录日志", url: "/system/logininfor" },
        { title: "在线用户", url: "/system/online" },
        { title: "定时任务", url: "/system/job" },
        { title: "服务监控", url: "/system/cpu" },
        { title: "缓存监控", url: "/system/cache" },
        { title: "代码生成", url: "/system/gen" },
        { title: "修改生成配置", url: "/system/gen/edittable" },
        //流程管理
        { title: "流程定义", url: "/system/flowable/definition" },
        { title: "流程设计", url: "/system/flowable/definition/model" },
        { title: "表单配置", url: "/system/flowable/form" },
        { title: "表单构建", url: "/system/tool/build/index" },
        //任务管理
        { title: "我的流程", url: "/system/flowable/task/process" },
        { title: "流程处理", url: "/system/flowable/task/record/index" },
        { title: "待办任务", url: "/system/flowable/task/todo" },
        { title: "已办任务", url: "/system/flowable/task/finished" },
      ],
      tags: [],
      isHomeNow: false,
    };
  },
  created() {},
  mounted() {
    this.initTabs();
  },

  methods: {
    initTabs() {
      console.log( this.$route.path);
      let path = this.$route.path;
      let title = this.$route.meta.title;
      // 1.路由决定页面，其实一进来页面已经有了，只需调整tab标签页即可
      let nav_index = this.navs.findIndex((item) => item.url === path||item.title === title);
      
      if (nav_index === -1) {
        // 不在导航列表里，说明是首页
        this.isHomeNow = true;
        this.activeIndex = "首页";
        if (this.tags.length > 0) {
          let old_index = this.tags.findIndex((v) => v.type === "warning");
          this.tags[old_index].type = "info";
        }
        return false;
      }


      let nav_obj = this.navs[nav_index];
      this.activeIndex = nav_obj.title;
      // 刷新后 进入 2.还没有标签页直接添加
      if (this.tags.length === 0) {
        //cd
        if(this.activeIndex !=="首页")
        this.tags.push({
          name: this.navs[0].title,
          url: this.navs[0].url,
          type: "info",
        });
        //cd
        this.tags.push({
          name: nav_obj.title,
          url: nav_obj.url,
          type: "warning",
        });
        return false;
      }


      // 3.已经有了标签页，判断点击的导航和标签页是否相同
      let old_index = this.tags.findIndex((v) => v.type === "warning");
      let index = this.tags.findIndex((v) => v.name === nav_obj.title);
      if (old_index === index) {
        return false;
      }
      this.tags[old_index].type = "info";
      if (index >= 0) {
        this.tags[index].type = "warning";
      } else {
        // 还没有标签页，直接加
        this.tags.push({
          name: nav_obj.title,
          url: nav_obj.url.indexOf(":") >= 0?this.$route.path:nav_obj.url,  //判断链接是是否有冒号  有表示是带参数的url
          type: "warning",
        });
      }
    },
    handleSelect(key) {
      // 点的首页
      if (key === "首页") {
        if (this.isHomeNow) {
          return false;
        } else {
          this.$router.push("/system/work");
          return false;
        }
      }
      if(this.isHomeNow){
        this.isHomeNow = false
      }
      // 1.筛选出key对应的导航
      let nav_index = this.navs.findIndex((item) => item.title === key);
      let nav_obj = this.navs[nav_index];
      // 2.还没有标签页直接添加
      if (this.tags.length === 0) {
        this.tags.push({
          name: nav_obj.title,
          url: nav_obj.url,
          type: "warning",
        });
        this.$router.push(nav_obj.url);
        return false;
      }
      // 3.已经有了标签页，判断点击的导航和标签页是否相同
      let old_index = this.tags.findIndex((v) => v.type === "warning");
      let index = this.tags.findIndex((v) => v.name === key);

      if (old_index === -1) {
        this.isHomeNow = false;
      } else {
        if (old_index === index) {
          return false;
        }
        this.tags[old_index].type = "info";
      }

      if (index >= 0) {
        this.tags[index].type = "warning";
        let url = this.tags[index].url;
        this.$router.push(url);
      } else {
        this.tags.push({
          name: nav_obj.title,
          url: nav_obj.url,
          type: "warning",
        });
        this.$router.push(nav_obj.url);
      }
    },
    handleTabClick(tag) {
      let index = this.tags.findIndex((v) => v.name === tag.name);
      if (this.isHomeNow) {
        this.isHomeNow = false;
        this.tags[index].type = "warning";
        let url = this.tags[index].url;
        this.$router.push(url);
        return false;
      }
      let active_index = this.tags.findIndex((v) => v.type === "warning");
      if (index === active_index) {
        return false;
      }

      this.tags[active_index].type = "info";
      this.tags[index].type = "warning";
      let url = this.tags[index].url;
      this.$router.push(url);
    },
    handleClose(tag) {
      
      let index = this.tags.findIndex((v) => v.name === tag.name);
      let active_index = this.tags.findIndex((v) => v.type === "warning");
      let last_index = this.tags.length - 1;
      let url = "";

      if (index != active_index) {
        // 1.关闭的不是当前页：直接关
      } else {
        // 2.关闭的是当前页
        // 2.1当前页是不是最后一个
        if (index === last_index) {
          // 3.是不是只有一个标签页
          if (index === 0) {
            // 3.1只有一个标签页:回首页
            this.$router.push("/system/work");
          } else {
            // 3.2不止一个：关闭当前，打开前一个
            this.tags[index - 1].type = "warning";
            url = this.tags[index - 1].url;
            this.$router.push(url);
          }
        } else {
          // 2.2当前页不是最后一个：关闭当前，打开下一个
          this.tags[index + 1].type = "warning";
          url = this.tags[index + 1].url;
          this.$router.push(url);
        }
      }
      this.tags.splice(index, 1);
    },
    toHome() {
      if (this.isHomeNow) {
        return false;
      }
      this.$router.push("/system/work");
      this.isHomeNow = true;
    },
  },
  watch: {
    $route(to, from) {
      // 路由嵌套时，返回不会触发created，所以在这里监听，初始化标签页
      this.initTabs();
    },
  },
};
</script>

<style lang="scss" scoped>
.outer {
  display: flex;
}
aside {
  position: relative;
  .close-aside {
    width: 15px;
    height: 60px;
    line-height: 60px;
    position: absolute;
    right: -15px;
    top: 50%;
    color: #ccc;
    transform: translate(-1px, -50%);
    cursor: pointer;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      right: -1px;
      bottom: 0;
      left: 0;
      background-color: #545c64;
      z-index: -1;
      transform: perspective(0.5em) rotateY(5deg);
    }
  }
}
.el-menu-vertical-demo {
  height: calc(100vh - 60px);
}
.inner {
  flex-grow: 1;
  width: 0;

  .tabs_parent{
   min-width:2000PX;

  .tabs {
    height: 50px;
    line-height: 64px;
    padding: 0 15px;
    background-color: #ccc;
    .el-tag {
      margin-right: 2px;
      cursor: pointer;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      position: relative;
    }
  }
  }

}

.router-view {
  padding: 15px;
  height: calc(100vh - 110px);
  overflow-y: auto;
  /* 火狐滚动条兼容 */
  scrollbar-color: #5c5c64 #ccc;
  scrollbar-width: thin;
}


</style>